<template>
  <div class="warning-notice">
    <el-badge :value="unreadCount" :max="99" class="warning-badge" v-if="unreadCount > 0">
      <el-button type="text" @click="showWarnings">
        <i class="el-icon-warning" style="font-size: 20px; color: #E6A23C;"></i>
      </el-button>
    </el-badge>
    <el-button type="text" @click="showWarnings" v-else>
      <i class="el-icon-warning" style="font-size: 20px; color: #E6A23C;"></i>
    </el-button>
    
    <el-dialog
      title="预警通知"
      :visible.sync="dialogVisible"
      :modal="false"
      :lock-scroll="false"
      width="600px"
      @closed="handleDialogClose">
      <div v-if="warnings.length === 0" class="empty-warnings">
        <i class="el-icon-info"></i>
        <p>暂无预警信息</p>
      </div>
      <el-tabs v-model="activeTab" v-else>
        <el-tab-pane label="未读预警" name="unread">
          <div v-if="unreadWarnings.length === 0" class="empty-warnings">
            <i class="el-icon-success"></i>
            <p>暂无未读预警</p>
          </div>
          <el-card v-for="item in unreadWarnings" :key="item.id" class="warning-card" shadow="hover">
            <div class="warning-header">
              <span class="warning-type">
                <el-tag type="danger" v-if="item.type === 1">心理测评</el-tag>
                <el-tag type="warning" v-else-if="item.type === 2">学业预警</el-tag>
                <el-tag v-else>系统通知</el-tag>
              </span>
              <span class="warning-time">{{ formatDate(item.createTime) }}</span>
            </div>
            <div class="warning-content">{{ item.content }}</div>
            <div class="warning-footer">
              <el-button type="text" size="small" @click="markAsRead(item.id)">标为已读</el-button>
            </div>
          </el-card>
          <div class="warning-actions" v-if="unreadWarnings.length > 0">
            <el-button type="primary" size="small" @click="markAllAsRead">全部标为已读</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已读预警" name="read">
          <div v-if="readWarnings.length === 0" class="empty-warnings">
            <i class="el-icon-info"></i>
            <p>暂无已读预警</p>
          </div>
          <el-card v-for="item in readWarnings" :key="item.id" class="warning-card" shadow="hover">
            <div class="warning-header">
              <span class="warning-type">
                <el-tag type="info" v-if="item.type === 1">心理测评</el-tag>
                <el-tag type="info" v-else-if="item.type === 2">学业预警</el-tag>
                <el-tag type="info" v-else>系统通知</el-tag>
              </span>
              <span class="warning-time">{{ formatDate(item.createTime) }}</span>
            </div>
            <div class="warning-content">{{ item.content }}</div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { format } from "@/utils/datetime"

export default {
  name: 'WarningNotice',
  data() {
    return {
      dialogVisible: false,
      warnings: [],
      unreadCount: 0,
      activeTab: 'unread'
    }
  },
  computed: {
    unreadWarnings() {
      return this.warnings.filter(item => item.status === 0);
    },
    readWarnings() {
      return this.warnings.filter(item => item.status === 1);
    }
  },
  methods: {
    // 获取当前用户未读预警数量
    getUnreadCount() {
      const username = this.$store.state.user.name;
      if (!username) return;
      
      this.$api.warning.countUnread(username).then(res => {
        if (res.code === 200) {
          this.unreadCount = res.data;
        }
      }).catch(error => {
        console.error('获取未读预警数量失败:', error);
      });
    },
    
    // 获取当前用户的预警信息
    getWarnings() {
      this.$api.warning.findCurrentUserWarnings().then(res => {
        if (res.code === 200) {
          this.warnings = res.data || [];
        }
      }).catch(error => {
        console.error('获取预警信息失败:', error);
      });
    },
    
    // 显示预警弹窗
    showWarnings() {
      this.dialogVisible = true;
      this.getWarnings();
    },
    
    // 标记为已读
    markAsRead(id) {
      this.$api.warning.markAsRead(id).then(res => {
        if (res.code === 200) {
          this.$message.success('已标记为已读');
          this.getWarnings();
          this.getUnreadCount();
        } else {
          this.$message.error(res.msg || '操作失败');
        }
      });
    },
    
    // 全部标记为已读
    markAllAsRead() {
      const username = this.$store.state.user.name;
      if (!username) return;
      
      this.$api.warning.markAllAsRead(username).then(res => {
        if (res.code === 200) {
          this.$message.success('全部标记为已读');
          this.getWarnings();
          this.getUnreadCount();
        } else {
          this.$message.error(res.msg || '操作失败');
        }
      });
    },
    
    // 关闭弹窗时的处理
    handleDialogClose() {
      this.getUnreadCount();
    },
    
    // 格式化日期
    formatDate(date) {
      return format(date);
    },
    
    // 定时刷新未读数量
    startRefreshTimer() {
      this.refreshTimer = setInterval(() => {
        this.getUnreadCount();
      }, 60000); // 每分钟刷新一次
    },
    
    // 清除定时器
    clearRefreshTimer() {
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer);
      }
    }
  },
  created() {
    this.getUnreadCount();
    this.startRefreshTimer();
  },
  beforeDestroy() {
    this.clearRefreshTimer();
  }
}
</script>

<style scoped>
.warning-notice {
  display: inline-block;
  margin-right: 15px;
}

.warning-badge >>> .el-badge__content {
  background-color: #E6A23C;
}

.warning-card {
  margin-bottom: 15px;
}

.warning-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.warning-content {
  line-height: 1.5;
  color: #303133;
  margin-bottom: 10px;
}

.warning-footer {
  text-align: right;
}

.warning-time {
  color: #909399;
  font-size: 12px;
}

.warning-actions {
  text-align: center;
  margin-top: 15px;
}

.empty-warnings {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.empty-warnings i {
  font-size: 40px;
  margin-bottom: 10px;
}

/* 覆盖Element UI的弹窗样式 */
/deep/ .el-dialog__wrapper {
  position: absolute !important;
  z-index: 2001 !important;
  top: 60px !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 600px !important;
}

/deep/ .el-dialog {
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

/deep/ .v-modal {
  display: none !important;
}
</style> 